@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

* {
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-bg {
    width: 100%;
    height: 100%;
    pointer-events: none;

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.target {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(#fff, 0.5);
    font-size: 2vw;
}

.target-light {
    left: 0;
}

.target-dark {
    right: 0;
}

body {
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

.right-click {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    padding: 2vw;
    border-radius: 1vw;
    font-size: 2.4vw;
    background-color: #fff;
}

/* Context Menu */

.contextMenu {
    --menu-border: rgba(255, 255, 255, 0.08);
    --menu-bg: linear-gradient(
                    45deg,
                    rgba(10, 20, 28, 0.2) 0%,
                    rgba(10, 20, 28, 0.7) 100%
    );
    --item-border: rgba(255, 255, 255, 0.1);
    --item-color: #fff;
    --item-bg-hover: rgba(255, 255, 255, 0.1);

    height: 0;
    overflow: hidden;
    background: var(--menu-bg);
    backdrop-filter: blur(5px);
    position: fixed;
    top: var(--top);
    left: var(--left);
    animation: menuAnimation 0.4s 0s both;
    transform-origin: left;
    list-style: none;
    margin: 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 999999999;
    box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgb(0 0 0 / 3%),
    0 4px 4px rgb(0 0 0 / 4%), 0 10px 8px rgb(0 0 0 / 5%),
    0 15px 15px rgb(0 0 0 / 6%), 0 30px 30px rgb(0 0 0 / 7%),
    0 70px 65px rgb(0 0 0 / 9%);

    &-item {
        padding: 4px;
    }

    &-item[data-divider="top"] {
        border-top: 1px solid;
    }

    &-item[data-divider="bottom"] {
        border-bottom: 1px solid;
    }

    &-item[data-divider="top-bottom"] {
        border-top: 1px solid;
        border-bottom: 1px solid;
    }

    &-item[data-divider] {
        border-color: var(--item-border);
    }

    &-button {
        color: var(--item-color);
        background: 0;
        border: 0;
        white-space: nowrap;
        width: 100%;
        border-radius: 4px;
        padding: 6px 24px 6px 7px;
        text-align: left;
        display: flex;
        align-items: center;
        font-size: 14px;
        width: 100%;
        animation: menuItemAnimation 0.2s 0s both;
        font-family: "Inter", sans-serif;
        cursor: pointer;

        &:hover {
            background-color: var(--item-bg-hover);
        }
    }

    &[data-theme="light"] {
        --menu-bg: linear-gradient(
                        45deg,
                        rgba(255, 255, 255, 0.45) 0%,
                        rgba(255, 255, 255, 0.85) 100%
        );
        --menu-border: rgba(0, 0, 0, 0.08);
        --item-border: rgba(0, 0, 0, 0.1);
        --item-color: rgb(10, 20, 28);
        --item-bg-hover: rgba(10, 20, 28, 0.09);
    }
}

@keyframes menuAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        height: var(--height);
        opacity: 1;
        border-radius: 8px;
        transform: scale(1);
    }
}

@keyframes menuItemAnimation {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
